<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style>
                                   .active+p{color: crimson;font-size: 20px;background-color: chartreuse}  相邻，选择匹配的F元素，且匹配的p元素紧位于匹配的body元素后面

                                                 /*body>p{color: darkorchid;background-color: darkblue;}   >p 这是子选择器，不包括后代ui                                                                                   !*EF*!*/
                                                              /*body p{color: red;font-size: 50px;background-color: chartreuse}   身体里面的p全部改变 后代选择器*/
    </style>

</head>
<body>


<p class="active">1</p>
<p>2</p>
<p>3</p>

<ui>

    <li> <p>5</p></li>
    <li> <p>6</p> </li>
    <li> <p>7</p></li>

</ui>



</body>
</html>